<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>食品列表 - 超市系统</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/menu.css">
    <link rel="stylesheet" href="styles/modal.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
     <header>
        <nav>
            <div class="sidebar-header">
                <img src="" alt="Logo" class="logo" style="width: 170px; height: 50px;"> 
            </div>
            <ul class="nav-links">
                <li><a href="index.html"><i class="fas fa-home"></i> 首页</a></li>
                <li><a href="menu.html"><i class="fas fa-list"></i> 商品列表</a></li>
                <li><a href="order.html"><i class="fas fa-shopping-bag"></i> 我的订单</a></li>
                <li><a href="cart.html"><i class="fas fa-shopping-cart"></i> 购物车</a></li>
                <li class="user-info" style="background-color: rgb(51, 51, 51);">
                    <div class="user-avatar-container">
                        <div class="user-avatar">
                            <img id="userAvatar" src="img/default-avatar.png" alt="用户头像">
                        </div>
                        <span id="username" class="user-name" style="color: black;">zhangsan</span>
                        <div class="avatar-dropdown">
                            <a href="/profile.html" target="_blank" id="profileBtn" class="dropdown-item">
                                <i class="fas fa-user" ></i> 个人信息
                            </a>
                            <a href="#" id="logoutBtn" class="dropdown-item">
                                <i class="fas fa-sign-out-alt"></i> 退出
                            </a>
                        </div>
                    </div>
                    <span id="username" class="user-name"></span>
                </li>
            </ul>
        </nav>
    </header>


    <main>
        <section class="menu-container">
            <h2>我们的购物列表</h2>
            <div class="menu-categories">
                <button class="category-btn active" data-category="all">全部</button>
                <button class="category-btn" data-category="toiletries">日用品</button>
                <button class="category-btn" data-category="snacks">休闲食品</button>
                <!-- <button class="category-btn" data-category="fruit">水果</button> -->
                <button class="category-btn" data-category="beverage">饮品</button>
            </div>
            <div class="menu-header">
                <div class="menu-actions" style="text-align: center;">
                    <button id="addDishBtn" class="primary-btn">
                        <i class="fas fa-plus"></i> 添加商品
                    </button>
                </div>
            </div>
            <div class="menu-items" id="menuItems">
                <!-- 商品将通过 JavaScript 动态加载 -->
                 <div class="menu-item" data-id="1">
                    <a href="product.html" target="_blank" style="text-decoration: none; color: inherit;">
                        <img src="/photo/shops/红牛.webp" alt="红牛">
                        <h3>红牛</h3>
                        <p>提神抗疲劳</p>
                        <p class="price">¥6.00</p>
                    </a>
                    <button class="add-to-cart">加入购物车</button>
                 </div>
            </div>
        </section>
    </main>

    <!-- 添加模态框 -->
    <div id="dishModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h3>添加商品</h3>
            <form id="dishForm">
                <div class="form-group">
                    <label>商品图片</label>
                    <input type="file" id="dishImage" accept="image/*" required>
                </div>
                <div class="form-group">
                    <label>商品名称</label>
                    <input type="text" id="dishName" required>
                </div>
                <div class="form-group">
                    <label>分类</label>
                    <select id="dishCategory" required>
                        <option value="toiletries">日用品</option>
                        <option value="snacks">休闲食品</option>
                        <!-- <option value="fruit">水果</option> -->
                        <option value="beverage">饮品</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>价格</label>
                    <input type="number" id="dishPrice" step="0.01" required>
                </div>
                <div class="form-group">
                    <label>描述</label>
                    <textarea id="dishDescription" rows="3"></textarea>
                </div>
                <div class="form-actions">
                    <button type="button" class="cancel-btn" onclick="closeModal()">取消</button>
                    <button type="submit" class="submit-btn">保存</button>
                </div>
            </form>
        </div>
    </div>

    <script src="js/menu.js"></script>
    <script src="/js/main.js"></script>
</body>
</html> 